<template>
  <div class="DLtao">
    <div class="DL">
      <div class="zbar">
        <div class="tie">手机号登录</div>
      </div>
      <div class="zcnt">
        <div class="zcmain">
          <div class="main-top">
            <div class="phoneNumber">

              <div class="u-phonewrap">
                <a href="javascript:;">
                  <span class="j-code">+86</span>
                  <span class="sanjiao"></span>
                </a>
                <div class="txtwrap">
                  <input
                    type="text"
                    name=""
                    id="phoneNum"
                    @click="number"
                    @blur="BlurPh"
                    placeholder="请输入手机号"
                  >
                </div>
              </div>

            </div>
            <div class="password">
              <input
                type="password"
                name=""
                id="password"
                @click="Pass"
                @blur="BlurPa"
                placeholder="请输入密码"
              >
            </div>
            <div class="mid-Wu">
              <i></i>
              <span>手机号或密码错误</span>
            </div>
            <div class="content">
              <label for="">
                <input type="checkbox">
                自动登录
              </label>
              <a href="javascript:;">忘记密码?</a>
            </div>
            <div class="login">
              <a
              href="javascript:;"
                @click="logining"
              >
                <p>登录</p>
              </a>
            </div>
          </div>
          <div class="main-but">
            <a
            href="javascript:;"
              class="AA1"
              @click="Fhui"
            > &nbsp;&nbsp;其他登录方式</a>
            <a
             href="javascript:;"
              class="AA2"
            >没有帐号？免费注册 ></a>
          </div>
        </div>
      </div>
      <span
        class="zcls"
        @click="TC"
      >×</span>
    </div>
  </div>
</template>
<script>
export default {
 data: () => ({
   numbers:0,
   password:"",
   cookie:""
 }),
  created() {},
  methods: {
    logining(){
      //登录失败
      

      let phoneNum=document.querySelector("#phoneNum")
      let passwords=document.querySelector("#password")
      this.numbers=phoneNum.value
      this.password=passwords.value
      this.posyLogin(this.numbers,this.password)
    },
    async posyLogin(num,pass){
        try {
          var midWu=document.querySelector(".mid-Wu")
          const res=await this.Api.cyzApi.posyLogin(num,pass)
          if(res.data.code !==200){
            console.log("登陆失败")
            midWu.style.display="block"
            this.$store.commit('DelDLorzc')
          }
          else if(res.data.code ==200){
            console.log("登陆成功")
            // this.$store.commit('PushUser',res.data.profile)
            midWu.style.display="none"
            localStorage.setItem('User',JSON.stringify(res.data.profile))
            localStorage.setItem('token',JSON.stringify(res.data.token))
            var Days = 1;
            var exp = new Date(); 
            exp.setTime(exp.getTime() + Days*24*60*60*1000);
            let CookIe=res.data.cookie.split(";")[0].split("=")[1]
            document.cookie="MUSIC_U"+"="+JSON.stringify(CookIe)+";expires="+exp.toGMTString();
            let dengLu=document.querySelector(".dengLu")
            let dengluTao=document.querySelector(".dengluTao")
            let ZDL=document.querySelector(".ZDL")
            dengLu.style.display="none"
            dengluTao.style.display="none"

            localStorage.setItem('RXX',JSON.stringify(res.data.profile))
            history.go(0)
          }
        } catch (error) {
          console.log(error)
        }
      },
    number(){
      var phoneNum=document.querySelector("#phoneNum")
      phoneNum.placeholder=""
    },
    BlurPh(){
      phoneNum.placeholder="请输入手机号"
    },
    Pass(){
    var password=document.querySelector("#password")
      password.placeholder=""
    },
    BlurPa(){
      password.placeholder="请输入密码"
    },

    Fhui(){
      let phoneLogin=document.querySelector(".phoneLogin")
      let ZDL=document.querySelector(".ZDL")
      phoneLogin.style.display="block";
      ZDL.style.display="none";
    },
    TC(){
      let dengluTao=document.querySelector(".dengluTao")
      let ZDL=document.querySelector(".ZDL")
      let dengLu=document.querySelector(".dengLu")
      dengLu.style.display="block"
      dengluTao.style.display="none"
      ZDL.style.display="none";
    },


  }
};
</script>
<style lang="less">
.DLtao{
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  .DL{
    position: absolute;
    z-index: 9998;
    width: 530px;
    border-radius: 4px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.8);
    border: none;
    background: #fff;
    .zbar{
    background: url('../../../assets/cyzimgs/xuebitu13.png');
    position: relative;
    line-height: 30px;
    z-index: 10;
    border-bottom: 1px solid #191919;
    border-radius: 4px 4px 0 0;
    background: #2d2d2d;
    user-select: none;
      .tie{
    padding-right: 45px;
    margin: 0;
    height: 38px;
    line-height: 38px;
    padding-left: 18px;
    border-radius: 3px 3px 0 0;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    background-position: 50% 0;
    user-select: none;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
      }
    }
    .zcnt{
    padding: 0;
    border: 1px solid #878787;
    border-width: 0 1px 1px;
    border-radius: 0 0 4px 4px;
    background: #fff;
    word-break: break-word;
      .zcmain{
        padding: 0;
        .main-top{
          padding: 30px 0 43px;
          width: 220px;
          margin: 0 auto;
            .phoneNumber{
              .u-phonewrap{
                position: relative;
                height: 30px;
                margin: 0;
                border: 1px solid #cdcdcd;
                border-radius: 2px;
                z-index: 10;
                  a{
                    position: relative;
                    float: left;
                    display: block;
                    height: 30px;
                    line-height: 30px;
                    padding: 0 18px 0 5px;
                    border-right: 1px solid #cdcdcd;
                    text-decoration: none;
                    color: #333;
                    word-break: break-word;
                      .j-code{
                        cursor: pointer;position: relative;
                        float: left;
                        display: block;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 18px 0 5px;
                        border-right: 1px solid #cdcdcd;color: #333;
                      }
                      .sanjiao{
                        position: absolute;
                        top: 14px;
                        right: 7px;
                        width: 7px;
                        height: 4px;
                        background: url('../../../assets/cyzimgs/xuebitu7.png');
                        background-position: -260px -450px;
                        display: inline-block;
                        overflow: hidden;
                        vertical-align: middle;
                        cursor: pointer;
                        line-height: 30px;
                        color: #333;
                      }
                  }
                  .txtwrap{
                    overflow: hidden;
                    word-break: break-word;
                      input{
                        outline: none;
                        box-sizing: content-box;
                        width: 206px;
                        font-size: 12px;
                        display: block;
                        padding: 5px 8px 5px;
                        height: 20px;
                        line-height: 20px;
                        border: none;
                        border-radius: 2px;
                      }
                  }
              }
            }
            .password{
              margin-top: 10px;
                input{
                  outline: none;
                  width: 206px;
                  height: 19px;
                  margin: 0;
                  padding: 5px 6px 6px;
                  border: 1px solid #cdcdcd;
                  border-radius: 2px;
                  line-height: 19px;
                  box-sizing: content-box;
                  font-size: 12px;
                  color: #333;
                  font-family: Arial, Helvetica, sans-serif;
                }
            }
            .mid-Wu{
              display: none;
              height: auto;
              line-height: 18px;
              margin-top: 5px;
              color: #e33232;
                i{
                  background: url('../../../assets/cyzimgs/xuebitu6.png');
                  margin-top: -2px;
                  margin-right: 8px;
                  width: 14px;
                  height: 14px;
                  background-position: -50px -270px;
                  font-style: normal;
                  text-align: left;
                  font-size: inherit;
                  display: inline-block;
                  overflow: hidden;
                  vertical-align: middle;
                }
                span{
                  height: auto;
                  line-height: 18px;
                  height: 17px;
                  margin-top: 5px;
                  line-height: 17px;
                  color: #e33232;
                  width: 100%;
                  height: 100%;
                  border: 0;
                  word-wrap: break-word;
                  word-break: break-word;
                }
            }
            .content{
              margin-top: 10px;
              word-break: break-word;
                label{
                  color: #666;
                  cursor: default;
                  width: 100%;
                  height: 100%;
                  border: 0;
                  word-break: break-word;
                    input{
                      margin: 0 12px 0 0;
                      vertical-align: middle;
                    }
                }
                a{
                  color: #666;
                  float: right;
                  cursor: pointer;
                  text-decoration: none;
                  word-break: break-word;
                }
            }
            .login{
              margin-top: 20px;
              word-break: break-word;
                a{
                  width: 215px;
                  color: #fff;
                  background: url('../../../assets/cyzimgs/xuebitu8.png');
                  background-position: right -428px;
                  text-decoration: none;
                  padding: 0 5px 0 0;
                  white-space: nowrap;
                  display: inline-block;
                  *display: inline;
                  *zoom: 1;
                  height: 31px;
                  line-height: 31px;
                  overflow: hidden;
                  *line-height: 32px;
                  vertical-align: top;
                  text-align: center;
                  cursor: pointer;
                  outline: none;
                    p{
                      width: 180px;
                      color: #fff;
                      background: url('../../../assets/cyzimgs/xuebitu8.png');
                      background-position: 0 -387px;
                      padding: 0 15px 0 20px;
                      pointer-events: none;
                      display: inline-block;
                      *display: inline;
                      *zoom: 1;
                      height: 31px;
                      line-height: 31px;
                      overflow: hidden;
                      *line-height: 32px;
                      vertical-align: top;
                      text-align: center;
                      cursor: pointer;
                    }
                }
            }
        }
        .main-but{
          padding: 0 19px;
          height: 48px;
          border-top: 1px solid #c6c6c6;
          border-radius: 0 0 4px 4px;
          line-height: 48px;
          background-color: #f7f7f7;
          word-break: break-word;
            .AA1{
              color: #0c72c3;
              font-size: 12px;
              text-decoration: none;
              float: left;
              cursor: pointer;
            }
            .AA2{
              font-size: 12px;
              color: #999;
              text-decoration: none;
              float: right;
              cursor: pointer;
            }
        }
        .main-but::after{
          clear: both;
          content: '.';
          display: block;
          height: 0;
          visibility: hidden;
        }
      }
    }
    .zcls{
    background: url('../../../assets/cyzimgs/xuebitu13.png');
    position: absolute;
    z-index: 20;
    top: 16px;
    right: 20px;
    width: 10px;
    height: 10px;
    overflow: hidden;
    text-indent: -9999px;
    cursor: pointer;
    background-position: 0 -95px;
    }
  }
}
</style>